// import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 打包分析插件
import { visualizer } from 'rollup-plugin-visualizer'

// 按需自动引入 element-plus
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// hooks自动引入
import Components from 'unplugin-vue-components/vite'

// 监听非源码文件变更热更新
import restart from 'vite-plugin-restart'

// 移动端适配
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'

// 引入图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
	plugins: [
		vue(),
		/**
		 * 打包后会在跟木下生成stats.html文件，浏览器打开
		 */
		visualizer(),
		/**
		 * 监听配置文件、环境变量、mock数据等非源码文件变更，自动检测这些文件变化并重启dev server
		 */
		restart({
			restart: ['./vite.config.[jt]s', './.env*'],
		}),

		// 按需引入
		AutoImport({
			// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
			imports: ['vue', 'vue-router', 'vuex', '@vueuse/head'],
			// 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/types/auto-import.d.ts'
			dts: 'src/types/auto-import.d.ts',
			resolvers: [
				ElementPlusResolver(),
				// Auto import icon components
				// 自动导入图标组件
				IconsResolver({
					prefix: 'Icon',
				}),
			],
		}),
		Components({
			dirs: ['src/components'], // 目标文件夹
			extensions: ['vue', 'jsx'], // 文件类型
			dts: 'src/types/components.d.ts', // 输出文件，里面都是一些import的组件键值对
			resolvers: [
				// Auto register icon components
				// 自动注册图标组件
				IconsResolver({
					enabledCollections: ['ep'],
				}),
				// Auto register Element Plus components
				// 自动导入 Element Plus 组件
				ElementPlusResolver(),
			],
		}),
		Icons({
			autoInstall: true,
		}),
	],
	css: {
		postcss: {
			plugins: [
				// 移动端适配
				postcsspxtoviewport8plugin({
					viewportWidth: 1920, //---基于1920宽度为100vw
				}),
			],
		},
		preprocessorOptions: {
			scss: {
				//此处 ; 不要忘记!!!
				additionalData: '@import "/src/assets/scss/index.scss";',
			},
		},
	},
	// 剔除console和debugger
	esbuild: {
		// // (1)只删除console和debugger
		// pure: ['console.log'], // 删除 console.log
		// drop: ['debugger'], // 删除 debugger

		// (2)删除所有console语句和debugger，包括console.log、console.warn、console.error等
		drop: ['console', 'debugger'], // 删除 所有的console 和 debugger
	},
	// 打包
	build: {
		minify: 'terser', // 必须开启：使用terserOptions才有效果
		terserOptions: {
			compress: {
				//生产环境时移除console
				drop_console: true,
				drop_debugger: true,
			},
		},
		// 配置打包文件分类输出
		rollupOptions: {
			output: {
				chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
				entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
				assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
			},
		},
	},
	// 跨域
	server: {
		//使用IP能访问
		host: '0.0.0.0',
		// 热更新
		hmr: true,
		//设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
		strictPort: false,
	},
	resolve: {
		alias: {
			// '@': fileURLToPath(new URL('./src', import.meta.url)),
			'@': resolve(__dirname, 'src'), // 将 @ 指向 src 目录
			// '#': fileURLToPath(new URL('./src/@types', import.meta.url)),
			// 'comp': fileURLToPath(new URL('./src/components', import.meta.url)),
			// // 配置图片要这样引用也可以自定义方法引入图片静态资源
			// "/img": "./src/assets",
		},
	},
})
